/* eslint-disable */
import react from 'react';
import echarts from 'echarts/lib/echarts';
import Chart from 'echarts-for-react/lib/core';

// 柱状图

class RightChartBarSSYQ extends react.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    setOption = () => {
        return {
            grid: {
                left: '4%',
                top: '4%',
                right: '4%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                show: false,
            }],
            yAxis: [
                {
                axisTick: 'none',
                axisLine: 'none',
                offset: '27',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '12',
                    }
                },
                data: ['DUST\n(mg/m³)', 'HCL\n(mg/m³)', 'CO\n(mg/m³)', 'SO²\n(mg/m³)', 'NOx\n(mg/m³)']
            }, {
                axisTick: 'none',
                axisLine: 'none',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '8',
                    }
                },
                data: ['差', '差', '差', '差', '差']
            },   {
                position:'left',
                axisTick: 'none',
                axisLine: 'none',
                offset: '0',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '8',
                    }
                },
                data: ['优', '优', '优', '优', '优',]
            }],
            series: [
                {
                    name: '条',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72],
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: '#000',
                                fontSize: '16',
                            }
                        }
                    },
                    barWidth: 12,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)'
                    },
                    z: 2
                }, {
                    name: '外框',
                    type: 'bar',
                    yAxisIndex: 2,
                    // barGap: '-100%',
                    data: [100, 100, 100, 100, 100],
                    barWidth: 20,
                    itemStyle: {
        
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'green'
                            },
                            {
                                offset: 0.3,
                                color: 'yellow'
                            },
                            {
                                offset: 0.6,
                                color: 'orange'
                            },
                            {
                                offset: 1,
                                color: 'red'
                            }
                        ])
                    },
                    z: 0
                },
        
            ]
        };
    }




    render() {
        return (
            <div className='situational-detail'>
                <Chart
                    echarts={echarts}
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: 200 }}
                />
            </div>
        )
    }

}
export default RightChartBarSSYQ;
